<template>
  <div class="event-search">
    <form @submit.stop.prevent="handleSearch" class="event-search-content">
      <cube-input :autofocus="autofocus" @input="searchVal" :placeholder="placeholder"></cube-input>
      <div class="search-button" @click="handleSearch">
        <!-- <i @click="handleSearch" class="iconsearch"></i> -->
        搜 索
      </div>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: [String],
      default: '搜索事件编号或描述'
    },
    autofocus: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleSearch(){
      this.$emit('handleSearch')
    },
    searchVal(v){
      this.$emit('input',v)
    }
  },
  
}
</script>

<style lang="stylus">
.event-search{
  background:rgba(255,255,255,1);
  width 100%;
  height 44px;
  display flex;
  align-items center;
  .event-search-content{
    width calc(100% - 24px);
    margin 0 auto;
    line-height 30px;
    display flex;
    flex-flow row nowrap;
    align-items center;
    justify-content center;
    height:30px;
    background: #f4f4f4;
    border-radius:4px;
    overflow hidden
    .cube-input{
      width 290px;
      input{
        padding: 5px 10px;
        background:#f4f4f4;
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:#333;
        text-align: left;
        &::-webkit-input-placeholder { /* WebKit browsers */
          color: #999;
        }
        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
          color: #999;
        }
        &::-moz-placeholder { /* Mozilla Firefox 19+ */
          color: #999;
        }
        &:-ms-input-placeholder { /* Internet Explorer 10+ */
          color: #999;
        }
      }
      &::after{
        border: none;
      }
    }
    .search-button {
      height 30px
      line-height 30px
      text-align center
      flex 1
      align-self center
      font-size 14px
      color #fff
      background-color rgba(4,48,102,1)
      i {
        vertical-align middle
      }
    }
  }
}
</style>
